<template>
  <div class="edit-option-content">
    <div class="top-tit">
      <div class="title">{{props.title}}</div>
      <el-button type="primary" v-if="!editFlag" @click="editData">编辑</el-button>
      <el-button type="primary" v-else @click="saveData">保存</el-button>
    </div>
    <div class="input-row" v-if="editFlag">
      <div class="left">
        <el-input
          v-model="inputValue"
          placeholder="请输入选项"
          style="width:290px;" 
        />
        <el-input
          v-if="props.address"
          v-model="addressValue"
          placeholder="请输入地址"
          style="width:290px;" 
        />
        <el-date-picker
          v-if="props.month"
          v-model="monthValue"
          is-range
          type="monthrange"
          range-separator="至"
          start-placeholder="开始时间"
          end-placeholder="结束时间"
          style="width:270px;"
        />
      </div>
      <el-button @click="addOption">增加</el-button>
    </div>
    <div class="tag-list" v-if="optionData.length > 0">
      <draggable v-model="optionData" item-key="item.id" handle=".drag-handle">
        <template #item="{ element, index }">
          <div class="tag-item">
            <i v-if="editFlag" class="iconfont drag-handle">&#xe7dc;</i>
            <span class="field-index">{{ index + 1 }}.</span>
            <span>{{element.name}}</span>
            <span v-if="element.month"><span class="black_2">时间：</span>{{ dayjs(element.month[0]).format("YYYY-MM") }} - {{ dayjs(element.month[1]).format("YYYY-MM") }}</span>
            <span v-if="element.address"><span class="black_2">地址：</span>{{ element.address }}</span>
            <el-icon v-if="editFlag" @click="deleteOption(element)" class="delete"><Delete /></el-icon>
          </div>
        </template>
      </draggable>
    </div>
  </div>
</template>

<script setup>
import { ref, defineProps, watch } from 'vue'
import { Delete } from '@element-plus/icons-vue'
import dayjs from 'dayjs'
import draggable from 'vuedraggable'
import { ElMessage } from 'element-plus'

const props = defineProps({
  title: {
    type: String,
    default: ''
  },
  optionData: {
    type: Array,
    default: () => []
  },
  month: {
    type: String,
    default: ''
  },
  address: {
    type: String,
    default: ''
  },
})
const optionData = ref([...props.optionData]);
const editFlag = ref(false)
const inputValue = ref("")
const monthValue = ref("")
const addressValue = ref("")

//编辑
const editData = () => {
  editFlag.value = true
}
//保存 根据当前项向接口提交数据
const saveData = () => {
  editFlag.value = false
}

//增加选项
const addOption = () => {
  let newData = {
    id: Date.now().toString(),
    label: inputValue.value,
  }
  if(inputValue.value == ""){
    return ElMessage.error("选项不能为空")
  }
  if (props.address == 'true') {
    if(addressValue.value == ""){
      return ElMessage.error("请输入地址")
    } else {
      newData.address = addressValue.value
    }
  }
  if (props.month == 'true') {
    if(monthValue.value == ""){
      return ElMessage.error("请选择时间")
    } else {
      newData.month = monthValue.value
    }
  }
  optionData.value.push(newData)
  inputValue.value = ''
  monthValue.value = ''
}
//删除选项
const deleteOption = (item) => {
  optionData.value = optionData.value.filter(i => i.id !== item.id)
}

watch(() => props.optionData, (newVal) => {
  optionData.value = [...newVal];
}, { deep: true });
</script>

<style scoped lang="scss">

.edit-option-content{
  padding: $padding-medium;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  box-sizing: border-box;
  border-radius: 4px;
  margin-right: 20px;
  width: calc(33.3% - 20px);
  min-width: 300px;
  height: max-content;
  border: 1px solid $borderColor;
  .top-tit{
    display: flex;
    align-items: center;
    justify-content: space-between;
    .title{
      font-size: 18px;
      color: $black;
    }
  }
  .input-row{
    display: flex;
    margin-top: 20px;
    justify-content: space-between;
    .left > *{
      margin-bottom: 10px;
    }
   
    button{
      margin-left: 10px;
      /* margin-top: 10px; */
      /* float: right; */
    }
  }
  .tag-list{
    margin-top: 20px;
    display: flex;
    flex-wrap: wrap;
    .tag-item{
      padding: 4px 10px;
      background: $channalPage;
      border-radius: 2px;
      margin: 0 10px 10px 0;
      color: $black_2;
      display:flex;
      align-items: center;
      font-size: 14px;
      span{
        margin-right: 4px;
      }
      .drag-handle{
        color: $mainColor;
        margin-right: 4px;
        cursor: move;
      }
      .delete{
        color: var(--el-color-danger);
      }
      .black_2{
        color: $black_2;
        font-size: 12px;
        margin-left: 10px;
      }
    }
  }
}
</style>